<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>移动movebox</title>
		<style>
			.movebox{
				width: 600px;
				height: 600px;
				background-image:url(image/03xiaohuangren.jpg);
				
				/*声明调用movebox动画*/
				animation: movebox 1s infinite;
				
				/*改变默认方式 支持坐标系*/
				position: relative;
				/*position位置relative相对坐标*/
			}
			
			/*定义动画(关键key帧frame,动画名称name)
			动画要设置坐标系才能展示效果*/
			@keyframes movebox{
				/*from开始位置，to结束位置*/
				from{left: 0px;}
				to{left: 900px;}
			}
		</style>
	</head>
	<body>
		<h1>移动方块动画效果,animation</h1>
		
		<div class="movebox"></div>
	</body>
</html>
